<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useDevtoolsGen, useGenConfig } from "./provider";
import { PlusDialogForm, PlusForm, PlusTable } from "plus-pro-components";
import { generateCode, GenReq } from "@/views/domain/devtools/api/gen";
import { messager } from "@/utils/message";

const {
  reloadTable,
  details,
  tableColumns,
  fieldColumns,
  tableData,
  addRow,
  deleteRow,
  autoFillFieldsContent,
  saveTable
} = useDevtoolsGen();

const { genOptionColumn } = useGenConfig();
const genOption = ref<GenReq>({
  backAcl: false,
  backApi: false,
  backEntity: false,
  backHttpClient: false,
  backHttpRouter: false,
  backHttpTest: false,
  backRepo: false,
  backService: false,
  frontApi: false,
  frontView: false,
  frontViewProvider: false
} as any);
const genVisible = ref(false);

const generate = async () => {
  genOption.value.domain = details.value.domain;
  genOption.value.className = details.value.className;
  const { ok, msg } = await generateCode(genOption.value);
  messager.alert(ok, msg);
};

const genOptionSetBack = (val: boolean) => {
  genOption.value.backAcl = val;
  genOption.value.backApi = val;
  genOption.value.backEntity = val;
  genOption.value.backHttpClient = val;
  genOption.value.backHttpRouter = val;
  genOption.value.backHttpTest = val;
  genOption.value.backRepo = val;
  genOption.value.backService = val;
};

const genOptionSetFront = (val: boolean) => {
  genOption.value.frontApi = val;
  genOption.value.frontView = val;
  genOption.value.frontViewProvider = val;
};

onMounted(() => {
  reloadTable();
});
</script>

<template>
  <div v-loading="!details" class="table-wrapper">
    <!-- 生成 -->
    <PlusDialogForm
      v-model="genVisible"
      v-model="genOption"
      :form="{
        columns: genOptionColumn,
        labelWidth: 150,
        colProps: { span: 8 },
        hasFooter: true
      }"
      @confirm="generate"
    >
      <template #form-footer>
        <el-space>
          <el-button type="primary" @click="genOptionSetBack(true)">
            全选后端
          </el-button>
          <el-button type="primary" @click="genOptionSetFront(true)">
            全选前端
          </el-button>
        </el-space>
      </template>
    </PlusDialogForm>

    <!-- 编辑 -->
    <div class="table-form">
      <PlusForm
        v-model:model-value="details"
        :columns="tableColumns"
        :row-props="{ gutter: 20 }"
        :col-props="{ span: 6 }"
        @submit="saveTable"
      >
        <template #footer="{ handleSubmit }">
          <div style="display: flex; justify-content: end">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
            <el-button type="danger" @click="genVisible = true">生成</el-button>
          </div>
        </template>
      </PlusForm>
    </div>
    <div class="table-form table-content">
      <div style="justify-content: space-between; display: flex">
        <el-space>
          <el-button type="primary" @click="addRow">新增字段</el-button>
        </el-space>
        <el-button type="primary" @click="autoFillFieldsContent">
          自动补充
        </el-button>
      </div>
      <el-divider style="margin: 10px 0" />

      <PureTable
        row-key="fieldName"
        align-whole="center"
        :columns="fieldColumns"
        :data="tableData"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
      >
        <template #plus-cell-operation="{ row }">
          <el-space>
            <el-button type="text" icon="Delete" @click="deleteRow(row)" />
          </el-space>
        </template>
      </PureTable>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.table-wrapper {
  display: flex;
  flex: 1;
  width: 100%;

  flex-direction: column;
  padding: 0.5rem;
  // background-color: var(--el-color-white);
}

.table-form {
  padding: 8px;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  background-color: var(--el-bg-color);
}

.table-content {
  margin-top: 10px;
}

:deep(.el-table__inner-wrapper::before) {
  height: 0;
}
</style>
